<%@ page language="java" import="java.util.*" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html>
<head>
    <%
        String contextPath = request.getContextPath();
        String basePath = request.getScheme() + "://"
                + request.getServerName() + ":" + request.getServerPort()
                + contextPath + "/";
    %>
    <base href="<%=basePath%>">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>爱旅游网</title>
    <!-- Bootstrap -->
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/common.css">
    <link rel="stylesheet" type="text/css" href="css/index/style.css">
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/index/swiper.min.css">
    <link rel="stylesheet" type="text/css" href="css/index/all.min.css">

    <!-- Bootstrap CSS -->
    <link href="css/style.css" type="text/css" rel="stylesheet" />
    <!-- Favicon -->
    <!-- Favicon and Touch Icons -->
    <link href="images/favicon.png" rel="shortcut icon" type="image/png">

</head>
<body>
<!--引入头部-->
<jsp:include page="pages/common/header.jsp"></jsp:include>
<!-- banner start-->
<section id="banner">
    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="2000">
        <!-- Indicators -->
        <ol class="carousel-indicators" >
            <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
            <li data-target="#carousel-example-generic" data-slide-to="1"></li>
            <li data-target="#carousel-example-generic" data-slide-to="2"></li>
        </ol>
        <!-- Wrapper for slides -->
        <div class="carousel-inner" role="listbox">
            <div class="item active">
                <img src="images/banner_1.jpg" style="height: 480px;" alt="">
            </div>
            <div class="item">
                <img src="images/banner_2.jpg" style="height: 480px;" alt="">
            </div>
            <div class="item">
                <img src="images/banner_3.jpg" style="height: 480px;" alt="">
            </div>
        </div>
        <!-- Controls -->
        <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>
</section>
<!-- banner end-->


<!-- 旅游 start-->
<section class="Categories pt80 pb80">
    <div class="container">
        <div class="row mb-5">
            <span class="paddtop1 font-weight lspace-sm" style="font-size: 25px;float: left;">热门景点</span>
            <a href="#" class="paddtop1 font-weight lspace-sm" style="float: right;padding-top: 30px;">查看全部</a>
        </div>
        <div class="row">
            <div class="swiper-container guides-slider">
                <!-- Additional required wrapper-->
                <div class="swiper-wrapper">
                    <!-- Slides-->
                    <div class="swiper-slide h-auto px-2">
                        <div class="card card-poster gradient-overlay mb-4 mb-lg-0"><a href="#" class="tile-link"></a><img src="images/index/1.jpg" alt="Card image" class="bg-image">
                            <div class="card-body overlay-content">
                                <h6 class="card-title text-shadow text-uppercase">New York</h6>
                                <p class="card-text text-sm">The big apple</p>
                            </div>
                        </div>
                    </div>
                    <div class="swiper-slide h-auto px-2">
                        <div class="card card-poster gradient-overlay mb-4 mb-lg-0"><a href="#" class="tile-link"></a><img src="images/index/2.jpg" alt="Card image" class="bg-image">
                            <div class="card-body overlay-content">
                                <h6 class="card-title text-shadow text-uppercase">Paris</h6>
                                <p class="card-text text-sm">Artist capital of Europe</p>
                            </div>
                        </div>
                    </div>
                    <div class="swiper-slide h-auto px-2">
                        <div class="card card-poster gradient-overlay mb-4 mb-lg-0"><a href="#" class="tile-link"></a><img src="images/index/3.jpg" alt="Card image" class="bg-image">
                            <div class="card-body overlay-content">
                                <h6 class="card-title text-shadow text-uppercase">Barcelona</h6>
                                <p class="card-text text-sm">Dali, Gaudi, Barrio</p>
                            </div>
                        </div>
                    </div>
                    <div class="swiper-slide h-auto px-2">
                        <div class="card card-poster gradient-overlay mb-4 mb-lg-0"><a href="#" class="tile-link"></a><img src="images/index/4.jpg" alt="Card image" class="bg-image">
                            <div class="card-body overlay-content">
                                <h6 class="card-title text-shadow text-uppercase">New York</h6>
                                <p class="card-text text-sm">City of hundred towers</p>
                            </div>
                        </div>
                    </div>
                    <div class="swiper-slide h-auto px-2">
                        <div class="card card-poster gradient-overlay mb-4 mb-lg-0"><a href="#" class="tile-link"></a><img src="images/index/5.jpg" alt="Card image" class="bg-image">
                            <div class="card-body overlay-content">
                                <h6 class="card-title text-shadow text-uppercase">Canada</h6>
                                <p class="card-text text-sm">Artist capital of Europe</p>
                            </div>
                        </div>
                    </div>
                    <div class="swiper-slide h-auto px-2">
                        <div class="card card-poster gradient-overlay mb-4 mb-lg-0"><a href="#" class="tile-link"></a><img src="images/index/6.jpg" alt="Card image" class="bg-image">
                            <div class="card-body overlay-content">
                                <h6 class="card-title text-shadow text-uppercase">Barcelona</h6>
                                <p class="card-text text-sm">Dali, Gaudi, Barrio</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="swiper-pagination d-md-none"> </div>
            </div>
        </div>
    </div>
</section>

<section class="Campaigns pt80 pb40">
    <div class="container">
        <div class="row mb-8">
            <span class="paddtop1 font-weight lspace-sm" style="font-size: 25px;float: left;">热门景点</span>
            <a href="#" class="paddtop1 font-weight lspace-sm" style="float: right;padding-top: 30px;">查看全部</a>
        </div>
        <div class="row" style="width: 1200px;margin-left: -28px;">
            <div class="col-lg-4 col-md-6 col-sm-6 col-xs-12">
                <div class="ListriBox">
                    <figure> <a href="listings-single-page-3.html" class="wishlist_bt"></a> <a href="listings-single-page-3.html"><img src="images//index/hotel1.jpg" class="img-fluid" alt="" >
                        <div class="read_more"><span>Read more</span></div>
                    </a> </figure>
                    <div class="ListriBoxmain">
                        <h3><a href="listings-single-page-3.html">Blue Hill Restaurant</a></h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do</p>
                        <a class="address" href="">Get directions</a> </div>
                    <ul>
                        <li><span class="Ropen">Now Open</span></li>
                        <li>
                            <div class="R_retings"><span>Blue Hill<em>122 Reviews</em></span><strong>8.2</strong></div>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="col-lg-4 col-md-6 col-sm-6 col-xs-12">
                <div class="ListriBox">
                    <figure> <a href="listings-single-page-3.html" class="wishlist_bt"></a> <a href="listings-single-page-3.html"><img src="images//index/hotel2.jpg" class="img-fluid" alt="" >
                        <div class="read_more"><span>Read more</span></div>
                    </a> </figure>
                    <div class="ListriBoxmain">
                        <h3><a href="listings-single-page-3.html">Blue Hill Restaurant</a></h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do</p>
                        <a class="address" href="">Get directions</a> </div>
                    <ul>
                        <li><span class="Rclosed">Closed</span></li>
                        <li>
                            <div class="R_retings"><span>Blue Hill<em>122 Reviews</em></span><strong>8.2</strong></div>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="col-lg-4 col-md-6 col-sm-6 col-xs-12">
                <div class="ListriBox">
                    <figure> <a href="listings-single-page-3.html" class="wishlist_bt"></a> <a href="listings-single-page-3.html"><img src="images//index/hotel3.jpg" class="img-fluid" alt="" >
                        <div class="read_more"><span>Read more</span></div>
                    </a> </figure>
                    <div class="ListriBoxmain">
                        <h3><a href="listings-single-page-3.html">Blue Hill Restaurant</a></h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do</p>
                        <a class="address" href="">Get directions</a> </div>
                    <ul>
                        <li><span class="Ropen">Now Open</span></li>
                        <li>
                            <div class="R_retings"><span>Blue Hill<em>122 Reviews</em></span><strong>8.2</strong></div>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="col-lg-4 col-md-6 col-sm-6 col-xs-12">
                <div class="ListriBox">
                    <figure> <a href="listings-single-page-3.html" class="wishlist_bt"></a> <a href="listings-single-page-3.html"><img src="images//index/hotel4.jpg" class="img-fluid" alt="" >
                        <div class="read_more"><span>Read more</span></div>
                    </a> </figure>
                    <div class="ListriBoxmain">
                        <h3><a href="listings-single-page-3.html">Blue Hill Restaurant</a></h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do</p>
                        <a class="address" href="">Get directions</a> </div>
                    <ul>
                        <li><span class="Ropen">Now Open</span></li>
                        <li>
                            <div class="R_retings"><span>Blue Hill<em>122 Reviews</em></span><strong>8.2</strong></div>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="col-lg-4 col-md-6 col-sm-6 col-xs-12">
                <div class="ListriBox">
                    <figure> <a href="listings-single-page-3.html" class="wishlist_bt"></a> <a href="listings-single-page-3.html"><img src="images//index/hotel5.jpg" class="img-fluid" alt="" >
                        <div class="read_more"><span>Read more</span></div>
                    </a> </figure>
                    <div class="ListriBoxmain">
                        <h3><a href="listings-single-page-3.html">Blue Hill Restaurant</a></h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do</p>
                        <a class="address" href="">Get directions</a> </div>
                    <ul>
                        <li><span class="Rclosed">Closed</span></li>
                        <li>
                            <div class="R_retings"><span>Blue Hill<em>122 Reviews</em></span><strong>8.2</strong></div>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="col-lg-4 col-md-6 col-sm-6 col-xs-12">
                <div class="ListriBox">
                    <figure> <a href="listings-single-page-3.html" class="wishlist_bt"></a> <a href="listings-single-page-3.html"><img src="images//index/hotel6.jpg" class="img-fluid" alt="" >
                        <div class="read_more"><span>Read more</span></div>
                    </a> </figure>
                    <div class="ListriBoxmain">
                        <h3><a href="listings-single-page-3.html">Blue Hill Restaurant</a></h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do</p>
                        <a class="address" href="">Get directions</a> </div>
                    <ul>
                        <li><span class="Ropen">Now Open</span></li>
                        <li>
                            <div class="R_retings"><span>Blue Hill<em>122 Reviews</em></span><strong>8.2</strong></div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="Blog-list pt80 pb50">
    <div class="container">
        <div class="row mb-8">
            <span class="paddtop1 font-weight lspace-sm" style="font-size: 25px;float: left;">热门景点</span>
            <a href="#" class="paddtop1 font-weight lspace-sm" style="float: right;padding-top: 30px;">查看全部</a>
        </div>
        <div class="row" style="width: 1200px;margin-left: -28px;">
            <!-- blog item-->
            <div class="col-lg-4 col-md-6 col-sm-6 col-xs-12 mb-4">
                <div class="card shadow border-0 h-100"><a href="post.html"><img src="images/index/b1.jpg" alt="..." class="img-fluid card-img-top"></a>
                    <div class="card-body">
                        <h5 class="my-2"><a href="post.html" class="text-dark">Autumn fashion tips and tricks </a></h5>
                        <p class="text-gray-500 text-sm my-3"><i class="far fa-clock mr-2"></i>January 16, 2019</p>
                        <p class="my-2 text-muted text-sm">Pellentesque habitant morbi tristique senectus. Vestibulum tortor quam, feugiat vitae, ultricies ege...</p>
                        <a href="post.html" class="btn btn-link pl-0">Read more<i class="fa fa-long-arrow-alt-right ml-2"></i></a> </div>
                </div>
            </div>
            <!-- blog item-->
            <div class="col-lg-4 col-md-6 col-sm-6 col-xs-12 mb-4">
                <div class="card shadow border-0 h-100"><a href="post.html"><img src="images/index/b2.jpg" alt="..." class="img-fluid card-img-top"></a>
                    <div class="card-body">
                        <h5 class="my-2"><a href="post.html" class="text-dark">Newest index apps </a></h5>
                        <p class="text-gray-500 text-sm my-3"><i class="far fa-clock mr-2"></i>January 16, 2019</p>
                        <p class="my-2 text-muted text-sm">ellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibu...</p>
                        <a href="post.html" class="btn btn-link pl-0">Read more<i class="fa fa-long-arrow-alt-right ml-2"></i></a> </div>
                </div>
            </div>
            <!-- blog item-->
            <div class="col-lg-4 col-md-6 col-sm-6 col-xs-12 mb-4">
                <div class="card shadow border-0 h-100"><a href="post.html"><img src="images/index/b3.jpg" alt="..." class="img-fluid card-img-top"></a>
                    <div class="card-body">
                        <h5 class="my-2"><a href="post.html" class="text-dark">Best books about indexgraphy </a></h5>
                        <p class="text-gray-500 text-sm my-3"><i class="far fa-clock mr-2"></i>January 16, 2019</p>
                        <p class="my-2 text-muted text-sm">Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.  Mauris placerat eleif...</p>
                        <a href="post.html" class="btn btn-link pl-0">Read more<i class="fa fa-long-arrow-alt-right ml-2"></i></a> </div>
                </div>
            </div>
        </div>
    </div>
</section>


<section class="section-less-padding">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <ul class="clientlogo-list">
                    <li><img src="images/index/client-logo1.png" alt=""></li>
                    <li><img src="images/index/client-logo2.png" alt=""></li>
                    <li><img src="images/index/client-logo3.png" alt=""></li>
                    <li><img src="images/index/client-logo4.png" alt=""></li>
                    <li><img src="images/index/client-logo5.png" alt=""></li>
                    <li><img src="images/index/client-logo6.png" alt=""></li>
                </ul>
            </div>
        </div>
    </div>
</section>

<%-- 引入尾部界面 --%>
<jsp:include page="pages/common/footer.jsp"/>

<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
<script src="js/bootstrap.min.js"></script>
<!-- Most Popular guides -->
<script src="js/index/owl.carousel.min.js" type="text/javascript"></script>
<script src="js/index/swiper.min.js" type="text/javascript"></script>
<script src="js/index/custom.js" type="text/javascript"></script>

</body>
</html>